<template>
    <!-- 水平展示 -->
    <div class="homeHeader-menus-bg" style="margin: 0 17.8% 0 17.8%;">
        <ul role="menubar" class="el-menu-demo el-menu--horizontal el-menu"
            style="background-color: rgb(245, 245, 245);">
            <li role="menuitem"
                class="el-menu-item"
                tabindex="0"
                background-color="#545c64"
                text-color="#ffffff" style="border-bottom-color: transparent;
                background-color: rgb(245, 245, 245);"
                v-for="(item, index) in routes"
                :class="tagsActive === item.name ? 'check-span' : 'no-span'"
            >
                <i style="margin-right: 10px; "></i>
                <span @click="changeActive(item.name)">{{ item.name }}</span>
            </li>
            
            <li role="menuitem"
                class="el-menu-item"
                tabindex="0"
                background-color="#545c64"
                text-color="#ffffff" style="border-bottom-color: transparent;
                background-color: rgb(245, 245, 245);"
            >
                <i style="margin-right: 10px; "></i>
                <span>更多 >></span>
            </li>
    
            <li class="so">
                <el-input placeholder="请输入书本名称" style="height: 20px;">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
            </li>
            
            <li role="menuitem"
                class="el-menu-item"
                tabindex="0"
                style="border-bottom-color: transparent;background-color: rgb(245, 245, 245); float: right;"
            >
                <i style="margin-right: 10px; "></i>
                <span style="color: red;font-family: cursive; font-weight: bold;">{{ bookType }}</span>
            </li>
        </ul>
    </div>

</template>

<script>

export default {
    name: "BookTab",
    props: {
        bookType: String
    },
    data() {
        return {
            currentView: "",
            tagsActive: '默认',
            routes: [
                {
                    name: '默认',
                },
                {
                    name: '销量',
                },
                {
                    name: '出版时间',
                },
                {
                    name: '价格',
                }
            ]
        }
    },
    components: {},
    mounted() {
        this.currentView = "Leave";
    },
    methods: {
        changeActive(name) {
            this.tagsActive = name
        }
    }
}
</script>

<style>

.el-menu--horizontal > .el-menu-item {
    float: left;
    height: 30px;
    line-height: 30px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
}

.check-span span {
    color: #1b1f23;
    border-bottom: 2px solid #c1b5a5;
}

.so {
    margin: 3px 0;
    width: 200px;
    float: right;
}

.so .el-input__inner {
    height: 28px;
    line-height: 28px;
}

</style>
